<template>
   <div>
        <button @click="fetchData">获取网络数据</button>
        <ul>
            <li v-for="(item,index) in list" :key="index">{{item.title}}</li>
        </ul>
   </div>
</template>

<script>
/**
 * 前端要向服务器获取数据的方式共有两种
 * 1、XMLHttpReqeust的方式
 * 2、Fetch方式（了解）
 */
export default {
    data(){
        return{
            list:[]
        }
    },
    methods:{
        fetchData(){
            fetch('/api/news/latest').then(res=>res.json()).then(res=>{
                console.log(res.stories);
                this.list=res.stories
            })
        }
    }
}
</script>

<style>

</style>